<template>
	
	<view class="page-container">
	  <!-- 内容区域 -->
	  <view class="content">
	    <!-- 上融生活专属客服 -->
	    <view class="customer-service">
	      <image class="logo" src="/static/logo.png" mode="aspectFit"></image>
	      <text class="service-text">VIP{{vip.name}}权益</text>
	    </view>
	
	    <!-- 描述文本 -->
	    <view class="description">
	      <text>{{vip.remark}}</text>
	    </view>
	
	    <!-- 按钮区域 -->
	    
	  </view>
	</view>

</template>

<script setup>
	import { ref,reactive } from "vue"
	import { onLoad } from '@dcloudio/uni-app';
	import { getVipInfo } from "@/api/member.js";
	const vip = reactive({
		name:'',
		remark:''
	});
	const price = ref(0);
	onLoad((options) => {
		price.value=options.price;
		getVip();
	});

	const getVip = async()=>{
		uni.showLoading();
		let vipInfo = await getVipInfo().then(res=>{
			Object.assign(vip, res);
		}).finally(()=>{
			uni.hideLoading();
		})
	}

	function goBack() {
		uni.navigateBack();
	}
</script>

<style scoped>
	
	.page-container {
	  background-color: #f5f5f5;
	}
	.top-title {
	  flex: 1;
	  text-align: center;
	  font-size: 32rpx;
	  color: #fff;
	  font-weight: bold;
	}
	
	.content {
	  margin: 10rpx 10rpx 10px 10rpx;
	  border: 1rpx solid #fff;
	  font-size: 14px;
	  position: relative;
	  overflow: hidden;
	  border-radius: 2px;
	  background-color: white;
	  background-clip: padding-box;
	  box-shadow: 0 1px 2px rgba(0, 0, 0, .3);
	  top: 0;
	}
	
	.customer-service {
	  display: flex;
	  align-items: center;
	  margin-bottom: 20rpx;
	}
	
	.logo {
	  width: 60rpx;
	  height: 60rpx;
	  margin-right: 10rpx;
	}
	
	.service-text {
	  font-size: 28rpx;
	  color: #333;
	}
	
	.description {
	  font-size: 28rpx;
	  color: #666;
	  margin-bottom: 20rpx;
	}
	
	.button-group {
	  display: flex;
	  justify-content: space-around;
	}
	
	.contact-button, .qq-button {
	  width: 300rpx;
	  height: 80rpx;
	  line-height: 80rpx;
	  text-align: center;
	  border-radius: 10rpx;
	  font-size: 28rpx;
	  color: #fff;
	}
	
	.contact-button {
	  background-color: #e74c3c;
	}
	
	.qq-button {
	  background-color: #2ecc71;
	}
	
	.customer-service,.description{
		padding: 20rpx;
	}
	.description{
		padding: 25rpx 20rpx;
		border-bottom: 1rpx solid #fff;
		box-shadow: 1px 0px 2px rgba(0, 0, 0, .3);
		text-indent: 2em;
		font-size: 26rpx;
		font-weight: 300;
	}
	.button-group{
		padding: 25rpx 20rpx;
	}
</style>
